<!DOCTYPE html>
<html>
<head>
    <title>CIDR转换为子网掩码</title>
    <script>
        function convertCIDRToSubnetMask() {
            var cidr = document.getElementById("cidr").value;

            var subnetMask = convertCIDR(cidr);

            document.getElementById("subnet-mask").innerHTML = "子网掩码: " + subnetMask;
        }

        function convertCIDR(cidr) {
            var networkBits = parseInt(cidr);
            var hostBits = 32 - networkBits;

            var subnetMaskBinary = "";

            for (var i = 0; i < 32; i++) {
                if (i < networkBits) {
                    subnetMaskBinary += "1";
                } else {
                    subnetMaskBinary += "0";
                }
            }

            var subnetMaskParts = [];
            for (var j = 0; j < 4; j++) {
                var binaryPart = subnetMaskBinary.substr(j * 8, 8);
                var decimal = parseInt(binaryPart, 2);
                subnetMaskParts.push(decimal);
            }

            var subnetMask = subnetMaskParts.join(".");

            document.getElementById("subnet-mask-binary").innerHTML = "子网掩码（二进制）: " + subnetMaskBinary;
            document.getElementById("network-bits").innerHTML = "网络位数: " + networkBits;
            document.getElementById("host-bits").innerHTML = "主机位数 (32-网络位数 ): " + hostBits;

            return subnetMask;
        }
    </script>
</head>
<body>
    <h1>CIDR转换为子网掩码</h1>
    <p>CIDR表示法：<input type="text" id="cidr" placeholder="请输入CIDR表示法"></p>
    <button onclick="convertCIDRToSubnetMask()">转换为子网掩码</button>
    <p id="subnet-mask"></p>
    <p id="subnet-mask-binary"></p>
    <p id="network-bits"></p>
    <p id="host-bits"></p>
</body>
</html>
